<template>
  <el-menu
    unique-opened
    router
    :default-active="activeRoute"
    class="homepage-menu"
    background-color="#324157"
    text-color="#bfcbd9"
    active-text-color="#20a0ff"
  >
    <!-- menuConfig:数组； menu：每一次遍历menuConfig里面的元素，对象-->
    <el-submenu :index="idx + ''" v-for="(menu, idx) in menuConfig" :key="idx">
      <template slot="title">
        <i :class="menu.icon"></i>
        <span>{{menu.title}}</span>
      </template>
      <!-- menu.subs: 数组;submenu:每一次遍历menu.subs里面的元素，对象 -->
      <el-menu-item
        :index="submenu.index"
        v-for="(submenu, sidx) in menu.subs"
        :key="sidx"
      >{{submenu.title}}</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { menuConfig } from "@/config/config";
export default {
  data() {
    return {
      menuConfig
    };
  },
  computed: {
    activeRoute() {
      return this.$route.meta.index || this.$route.path;
    }
  }
};
</script>

<style lang="less" scoped>
.homepage-menu {
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  width: 250px;
  background-color: aquamarine;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
}
</style>